$(document).ready(function() {
    var uploadModal = new bootstrap.Modal('#uploadModal');
    var selectedFile = null;

    // 打开模态窗口
    $('#openUploadModal').click(function(e) {
        e.preventDefault();
        uploadModal.show();
    });

    // 处理文件选择
    $('#fileInput').change(function(e) {
        handleFiles(e.target.files);
    });

    // 处理拖放
    $('#uploadArea')
        .on('dragover', function(e) {
            e.preventDefault();
            $(this).css({
                'border-color': '#0d6efd',
                'background-color': 'rgba(13, 110, 253, 0.1)'
            });
        })
        .on('dragleave', function(e) {
            e.preventDefault();
            $(this).css({
                'border-color': '#dee2e6',
                'background-color': ''
            });
        })
        .on('drop', function(e) {
            e.preventDefault();
            $(this).css({
                'border-color': '#dee2e6',
                'background-color': ''
            });
            handleFiles(e.originalEvent.dataTransfer.files);
        });

    // 处理文件
    function handleFiles(files) {
        if (!files || files.length === 0) return;

        selectedFile = files[0];

        // 验证文件类型
        if (!selectedFile.type.match('image.*')) {
            alert('请选择图片文件（JPG/PNG/GIF）');
            return;
        }

        // 显示文件信息
        $('#fileInfo').html(`已选择: ${selectedFile.name} (${(selectedFile.size/1024).toFixed(2)} KB)`);

        // 显示预览
        var reader = new FileReader();
        reader.onload = function(e) {
            $('#uploadPreview').attr('src', e.target.result).show();
            $('#confirmUpload').prop('disabled', false);
        };
        reader.readAsDataURL(selectedFile);
    }

    // 确认上传
    $('#confirmUpload').click(function() {
        if (!selectedFile) {
            alert('请先选择图片');
            return;
        }

        $('#uploadProgress').removeClass('d-none');

        // 创建FormData
        var formData = new FormData();
        formData.append('icon', selectedFile);
        formData.append('description', $('#imageDescription').val());

        // 这里使用实际的上传代码
        $.ajax({
            url: 'auth/posticonApi/', // 替换为你的上传接口
            type: 'POST',
            data: formData,
            headers: {
                'X-CSRFToken': window.CSRF_TOKEN
            },
            processData: false,
            contentType: false,
            xhr: function() {
                var xhr = new XMLHttpRequest();
                xhr.upload.addEventListener('progress', function(e) {
                    if (e.lengthComputable) {
                        var percent = Math.round((e.loaded / e.total) * 100);
                        $('#uploadProgress .progress-bar').css('width', percent + '%');
                    }
                });
                return xhr;
            },
            success: function(response) {
                alert('上传成功！');
                uploadModal.hide();
            },
            error: function(xhr, status, error) {
                alert('上传失败: ' + error);
            },
            complete: function() {
                $('#uploadProgress').addClass('d-none');
            }
        });
    });

    // 重置表单
    $('#uploadModal').on('hidden.bs.modal', function() {
        $('#fileInput').val('');
        $('#fileInfo').empty();
        $('#uploadPreview').hide().attr('src', '#');
        $('#imageDescription').val('');
        $('#uploadProgress').addClass('d-none').find('.progress-bar').css('width', '0%');
        $('#confirmUpload').prop('disabled', true);
        selectedFile = null;
    });
});